<template>
	<div class="recent_detail" :class="{ isTandalone }">
    <div class="header">
      <div class="user">
        <div class="tx">
          <img src="/imgs/recentWin/tx.png" />
          <img :src="avatarUrl" alt="" class="avatar">
        </div>
      </div>
      <div class="username">
        <span>{{ detail.nickname }}</span>
        <img v-lazy="`/imgs/level/newicon/level${detail.vip_level || 0}.webp`" alt="" class="vip" />
      </div>
      <div class="pid">
        {{ $t('recent_win_gameNo') }}: {{ detail.game_no }}
      </div>
      <div class="pid" v-if="detail?.timestamp" style="margin-bottom: 0px">
        {{ dayjs(dayjs.unix(detail?.timestamp)).format('YYYY/MM/DD HH:mm') }}
      </div>
      <div class="money">
        <div class="bd"></div>
        <span>{{ $t('recent_win_money') }}</span>
        <div class="bd bd2"></div>
      </div>
      <NumberCard :number="detail.money" />
      <div class="info">
        <div>
          <div>{{ $t('recent_win_betMoney') }}</div>
          <div>{{ formatNumber(detail.bet_money) }}</div>
        </div>
        <div style="text-align: right;">
          <div>{{ $t('recent_win_multiple') }}</div>
          <div class="red">{{ Number(detail.multiple).toFixed(2) }}X</div>
        </div>
      </div>
    </div>

    <Game :hideHomeWinning="true" />
	</div>
</template>
<script setup lang="ts">
import { computed, inject, onUnmounted, Ref } from 'vue';
// import { useRoute, useRouter } from 'vue-router';
import { Local } from "@/utils/storage";
import { joinURL } from '@/utils/publicMethods'
import { Page } from "@/store/page";
import pinia from "@/store";
import { storeToRefs } from "pinia";
import NumberCard from './components/NumberCard.vue'
import { formatNumber } from './hooks/useRecentWin';
import Game from '../game/index.vue'
import dayjs from 'dayjs';


const headerStyle= inject('headerStyle') as Ref<any>

// const route = useRoute();
// const router = useRouter();

const { settings } = storeToRefs(Page(pinia));

const detail = computed(() => {
  return Local.get('selectedGameItem') || {}
})

const avatarUrl: any = computed(() => {
  if (!detail.value.head_icon) return `/imgs/head_icons/1002.webp`;
  if (detail.value.head_icon.toString().includes(".")) {
    return  joinURL(settings.value.media_url, detail.value.head_icon);
  } else {
    if (
      ![1000, 1001, 1002, 1003, 1004, 1005, 1006, 2001, 2002, 2003, 2004, 2005, 2006].includes(
        Number(detail.value.head_icon)
      )
    ) {
      return `/imgs/head_icons/1002.webp`;
    }
  }
  return `/imgs/head_icons/${detail.value.head_icon || 1002}.webp`;
});

const isTandalone = computed(() => {
  return window.matchMedia("(display-mode: standalone)").matches
})

window.addEventListener('scroll', handleScroll)

window.scrollTo(0, 0)

function handleScroll() {
  if (document.documentElement.scrollTop > 0) {
    headerStyle.value = null
  } else {
    headerStyle.value = {
      background: 'transparent'
    }
  }
}

onUnmounted(() => {
  window.removeEventListener("scroll", handleScroll);
})

</script>
<style lang="scss" scoped>
.recent_detail {
  --g-detail-header-display: none;
  .header {
    margin-top: -50px;
    padding-top: 50px;
    width: 100%;
    height: 334px;
    flex-shrink: 0;
    background: linear-gradient(181deg, rgba(19, 18, 50, 0.00) 77.45%, #131232 99.46%), linear-gradient(95deg, #FA397E 0%, #FF852D 99.32%);
  }

  &.isTandalone {
    .header {
      margin-top: calc(-50px - env(safe-area-inset-top));
      padding-top: calc(50px + env(safe-area-inset-top));
      height: calc(334px + env(safe-area-inset-top));
    }
  }

  .user {
    margin: 0 auto;
    margin-top: 4px;
    background-image: url('/imgs/recentWin/PKBET.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    width: 232px;
    height: 90px;
    overflow: hidden;

    .tx {
      width: 76px;
      height: 76px;
      position: relative;
      margin: 0 auto;
      margin-top: 4px;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 100;
      }
      .avatar {
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .username {
    margin-top: -6px;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .vip {
    width: 48px;
    height: 18px;
    margin-left: 8px;
  }

  .pid {
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 4px;
  }

  .money {
    display: flex;
    align-items: center;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0 auto;
    margin-top: 4px;
    justify-content: center;

    .bd {
      width: 74px;
      height: 2px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
    }
    .bd2 {
      width: 74px;
      height: 2px;
      background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
    }
    span {
      margin: 0 5px;
    }
  }

  .info {
    width: 347px;
    height: 68px;
    margin: 0 auto;
    border-radius: 8px;
    background: #131232;
    margin-top: 10px;
    padding: 12px 20px;
    box-sizing: border-box;

    /* 黑/131232 */
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

    display: flex;
    justify-content: space-between;
    >div {
      >div {
        &:first-child {
          color: #fff;
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 21px; /* 21px */
        }
        &:last-child {
          margin-top: 4px;
          color: #F49A24;
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 21px;; /* 21px */
          &.red {
            color: #FF5252;
            text-align: right;
          }
        }
      }
    }
  }

  
  :deep(.game_details) {
    height: auto;
    overflow: hidden !important;
    .header {
      display: var(--g-detail-header-display);
    }
    .content {
      padding-top: 20px;
    }
  }
}

</style>
